<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./vue.js"></script>
</head>

<body>
  <div id="app">
    <my-button :count="num" @add="add">
      <span>按钮</span>
    </my-button>
  </div>
</body>
<script>
  const { createApp, ref } = Vue;

  const app = createApp({
    setup() {
      const num = ref(0);

      const add = (newCount) => {
        num.value = newCount;
      }
      return {
        num,
        add
      };
    }
  });

  app.component('my-button', {
    props: ['count'],
    emits: ['add'],
    setup(props, { emit }) {
      // 定义一个处理点击事件的方法
      const handleClick = () => {
        // 当按钮被点击时，通知父组件更新 count
        emit('add', props.count + 1);
      };
      return {
        handleClick
      };
    },
    template: `
     <button @click="handleClick" style="border-radius: 50px; border: none;width:100px;height:50px;">
        <!-- 插槽内容 -->
        <slot></slot>
       
         {{ count }}
      </button>
    `

  });

  app.mount('#app');
  //   是的，你的代码中使用了子传父、父传子和插槽。

  // 子传父：在 my-button 组件中，当按钮被点击时，会触发 handleClick 方法，并通过 emit 方法向父组件发送一个自定义事件 'add'，并传递新的 count 值。父组件监听这个事件，并在事件处理函数 add 中更新 num 的值。

  // 父传子：在父组件中，通过 :count="num" 将 num 的值传递给 my-button 组件的 count 属性。

  // 插槽：在 my-button 组件的模板中，使用了 <slot></slot> 插槽，允许父组件在 my-button 组件中插入自定义内容。在你的例子中，父组件在 my-button 组件中插入了一个 <span>按钮</span> 元素。

  // 这些是 Vue.js 中常见的组件通信和插槽使用方式。
</script>

</html>